<template>
    <div class="layoutHome-wrap">
        <div class="layout-sidebar-wrap" >
            <span class="layout-sidebar-shrink" v-if="!isHideSidebar" @click="toShrink" style="margin-right:-30px;"></span>
            <span class="layout-sidebar-shrink layout-sidebar-open" style="margin-right:-31px;" v-else @click="toShrink"></span>
            <ZhtsSidebar v-if="!isHideSidebar"></ZhtsSidebar>
            <city-list-with-button></city-list-with-button>
        </div>





        <div class="layout-bottom-wrap" v-show="addMove">
            <header @click="close"></header>
            <ZhtsBottom></ZhtsBottom>
        </div>

        <div class="layout-assist-wrap" >
          <button-area></button-area>
          <span class="layout-assit-shrink" v-if="!inHideAssist" @click="toShrinkAssit"></span>
          <span class="layout-assit-shrink layout-assit-open" v-else @click="toShrinkAssit"></span>
          <ZhtsAssist v-if="!inHideAssist"></ZhtsAssist>
          <Zhlengend></Zhlengend>
        </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import layoutMain from '@/views/classic/LayoutMain.vue';
import ZhtsSidebar from '@/views/wsyj/ZhtsModule/ZhtsSidebar.vue';
import ZhtsAssist from '@/views/wsyj/ZhtsModule/ZhtsAssist.vue';
import ZhtsBottom from "@/views/wsyj/ZhtsModule/ZhtsBottom.vue";
import {messsageBus} from "@/util/message";
import CityListWithButton from "@/components/common/CityListWithButton.vue";
import buttonArea from "@/components/common/ZhtsButtonArea.vue"
import Zhlengend from "@/components/common/gis/lengend/Zhlengend.vue"
@Component({
  name: 'zhtsHome',
  components: {
    ZhtsSidebar,
    ZhtsAssist,
    ZhtsBottom,
    CityListWithButton,
    buttonArea,
    Zhlengend,
  },
})
export default class ZhtsHome extends Vue {
    private isHideSidebar = false;
    private inHideAssist = false;
    private addMove = false;

    private created() {
        (messsageBus as any).$on("moveInState", (event: any) => {
            this.addMove = event;
        });
    }

    private toShrink() {
        this.isHideSidebar = !this.isHideSidebar;
    }

    private toShrinkAssit() {
        this.inHideAssist = !this.inHideAssist;
        this.$store.dispatch('layoutModule/isHideAssistEmit', this.inHideAssist);
    }

    // 关闭按钮的点击事件
    private close() {
        this.addMove = !this.addMove;
    }

}
</script>
<style lang="less" scoped>
    @import url('../../../assets/css/Layout.less');

    header {
        background: url('../../../assets/img/legend/close.png') no-repeat;
        background-size: 100% 100%;
        width: 50px;
        height: 50px;
        position: absolute;
        top: -12px;
        right: -15px;
        z-index: 1;
        cursor: pointer;
    }

</style>